<template>
	<view class="container">
		<uni-card title="阀门大屏" :is-shadow="true" margin="20rpx" class="full-height-card">
			<view class="card-header">
				<view class="header-title">阀门数据可视化</view>
				<view class="header-action">
					<button type="primary" size="mini" @click="refresh">刷新数据</button>
				</view>
			</view>
			<view class="card-content">
				<view class="chart-container">
					<view class="chart-title">阀门开关率柱状图</view>
					<BarChart :refreshKey="refreshKey" />
				</view>
				<view class="chart-container">
					<view class="chart-title">阀门压力折线图</view>
					<LineChart :refreshKey="refreshKey" />
				</view>
				<view class="chart-container">
					<view class="chart-title">阀门类型分布饼图</view>
					<PieChart :refreshKey="refreshKey" />
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
import BarChart from '@/components/BarChart.vue'
import LineChart from '@/components/LineChart.vue'
import PieChart from '@/components/PieChart.vue'

export default {
	components: { BarChart, LineChart, PieChart },
	data() {
		return { refreshKey: 0 }
	},
	methods: {
		refresh() { this.refreshKey++ }
	}
}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
	}
	
	.container {
		padding-bottom: 0;
		min-height: 100vh;
	}
	
	.full-height-card {
		min-height: calc(100vh - 140rpx);
		margin-bottom: 0 !important;
		box-shadow: none !important;
		
		:deep(.uni-card__content) {
			padding-bottom: 50rpx;
		}
	}
	
	.card-content {
		padding: 10rpx 0;
	}
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx 20rpx;
		border-bottom: 1px solid #EBEEF5;
		margin-bottom: 20rpx;
	}
	
	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #303133;
	}
	
	.header-action {
		button {
			margin: 0;
		}
	}
	
	.chart-container {
		margin-bottom: 40rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	}
	
	.chart-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #303133;
		margin-bottom: 20rpx;
		padding-left: 20rpx;
		border-left: 8rpx solid #3A8CFF;
	}
	
	.echart-box {
		width: 100%;
		height: 300px;
		position: relative;
	}
	
	.echart {
		width: 100%;
		height: 100%;
	}

	/* 微信小程序特有样式 */
	/* #ifdef MP-WEIXIN */
	.ec-canvas {
		width: 100%;
		height: 300px;
	}
	/* #endif */
	
	/* H5特定样式 */
	/* #ifdef H5 */
	#line-chart-1, #line-chart-2, #pie-chart {
		width: 100%;
		height: 100%;
		min-height: 300px;
	}
	/* #endif */
</style> 